@import 'constants.scss';


.main{
	.wrapper{
		.articles-wrapper{
			.banner-group{
				width: 100%;
				height: $bannerHeight;
				background-color: blue;
				position: relative;
				overflow: hidden;

				.banner-ul{
					width: $bannerWidth * $bannerCount;
					position: absolute;

					li{
						float: left;
						a{
							img{
								width: $bannerWidth;
								height: $bannerHeight;
							}
						}
					}
				}

				.prev-ctl,.next-ctl{
					font-size: 80px;
					position: absolute;
					background-color: rgba(0,0,0,.4);
					cursor: pointer;
					color: #fff;
					user-select: none;
					display: none;
					transition: all 0.5s;

					&:hover{
						color: #f8b62b;
						background-color: rgba(0,0,0,.8);
					};
				}

				&:hover .prev-ctl,&:hover .next-ctl{
					display: block;
				}
				.prev-ctl{
					left: 5px;
					top: 50%;
					transform: translateY(-50%);
				}

				.next-ctl{
					right: 5px;
					top: 50%;
					transform: translateY(-50%);
				}

				.page-control-group{
					position: absolute;
					bottom: 5px;
					left: 50%;
					transform: translatex(-50%);
					.page-control{
						li{
							float: left;
							width: 20px;
							height: 20px;
							border-radius: 50%;
							background-color: rgba(255,255,255,.2);
							cursor: pointer;
							&:nth-child(n+2){
								margin-left: 5px;
							}
							&.current{
								background-color: orange;
							}
						}
					}
				}
			}
		}
	}
}